<template>
  <el-card class="container mg-t-20 border-radius">
    <div slot="header">
      <span class="fs-14">推荐网站</span>
    </div>
    <el-row class="push-form">
      <el-col :span="24">
        <el-form :model="pushForm" ref="pushForm" :rules="pushFormRules" label-position="left" label-width="80px">
          <el-form-item label="站长说明">
            欢迎提交优质资源
          </el-form-item>
          <el-form-item label="网站图标" prop="webIcon">
            <ImageUpload :limit="1" v-model="pushForm.webIcon"></ImageUpload>
          </el-form-item>
          <el-form-item label="网站分类" prop="classifyId">
            <el-select v-model="pushForm.classifyId" placeholder="请选择分类" size="medium">
              <el-option
                v-for="item in classifyList"
                :key="item.id"
                :label="item.classifyName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="网站标题" prop="webName">
            <el-input type="text" size="medium" placeholder="请输入网站标题" v-model="pushForm.webName"></el-input>
          </el-form-item>
          <el-form-item label="网站地址" prop="webUrl">
            <el-input type="text" size="medium" placeholder="请输入网站地址" v-model="pushForm.webUrl"></el-input>
          </el-form-item>
          <el-form-item label="网站标签" prop="labelList">
            <el-select
              v-model="pushForm.labelList"
              multiple
              :multiple-limit="5"
              filterable
              :loading="selectTagLoading"
              default-first-option
              :clearable="true"
              placeholder="请选择最多5个标签"
              size="medium"
              @change="selectTagChange">
              <el-option
                v-for="item in tagList"
                :key="item.labelName"
                :label="item.labelName"
                :value="item.labelName">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="网站详情" prop="webDetails">
            <el-input type="textarea" size="medium" maxlength="100" minlength="2" show-word-limit placeholder="请输入网站详情" :rows="5" v-model="pushForm.webDetails"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="medium" @click="onSubmit">提交</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
import {mapState} from "vuex";

export default {
  layout: 'navigation',
  middleware: ["login"],
  computed: {
    ...mapState({
      classifyList: state => state.classifyList,
      nav_config: state => state.config
    })
  },
  //SEO优化
  head(){
    return{
      title: "网站提交-" + this.nav_config.name,
      meta: [
        { name: 'keywords', content: this.nav_config.keywords },
        { hid: 'description', name: 'description', content: this.nav_config.description },
      ]
    }
  },
  data(){
    return{
      //标签列表
      tagList: [{
        value: 'HTML',
        label: 'HTML'
      }, {
        value: 'CSS',
        label: 'CSS'
      }, {
        value: 'JavaScript',
        label: 'JavaScript'
      }],
      //标签加载中
      selectTagLoading: true,
      //表单参数
      pushForm: {
        classifyId: null,
        webName: "",
        webUrl: "",
        webIcon: "",
        webDetails: "",
        labelList: []
      },
      //表单验证规则
      pushFormRules: {
        classifyId: [
          { required: true, message: '请选择网站分类', trigger: 'change' }
        ],
        webName: [
          { required: true, message: '请输入网站标题', trigger: 'blur' },
          { min: 1, max: 20, message: "长度在 1 到 20 个字符", trigger: "blur" }
        ],
        webUrl: [
          { required: true, message: '请输入网站地址', trigger: 'blur' },
          { min: 3, max: 30, message: "长度在 3 到 30 个字符", trigger: "blur" }
        ],
        webDetails: [
          { required: true, message: '请输入网站详情', trigger: 'blur' },
          { min: 1, max: 100, message: "长度在 1 到 100 个字符", trigger: "blur" }
        ],
        labelList: [
          { required: true, message: '请选择网站标签', trigger: 'change' }
        ]
      }
    }
  },
  mounted() {
    this.getLabelList();
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.pushForm = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpg' || file.type === 'image/png' || file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG、PNG、JPEG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    //选中标签执行
    selectTagChange(value){
      console.log(value)
    },
    //获取标签列表
    getLabelList(){
      this.$api_label.getList(999, 1).then(res => {
        if(res.code === 200){
          this.tagList = res.rows;
          this.selectTagLoading = false;
        }
      });
    },
    //网站提交
    onSubmit(){
      this.$refs.pushForm.validate((valid) => {
        if (valid) {
          this.$api_links.submit(this.pushForm).then(res => {
            if(res.code === 200){
              this.$message({
                message: '提交成功，等待审核',
                type: 'success'
              });
              this.pushForm = {};
            }else{
              this.$message.error(res.msg);
            }
          });
        } else {
          this.$message({
            message: '请填写完整信息',
            type: 'warning'
          });
          return false;
        }
      });
    }
  }
}
</script>
